<!DOCTYPE html>
<!--
Copyright (c) 2015 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="/tracing/base/unit.html">
<link rel="import" href="/tracing/base/utils.html">
<link rel="import" href="/tracing/ui/analysis/analysis_sub_view.html">
<link rel="import" href="/tracing/ui/analysis/single_event_sub_view.html">
<link rel="import"
  href="/tracing/ui/analysis/user_expectation_related_samples_table.html">
<link rel="import" href="/tracing/value/histogram_set.html">
<link rel="import" href="/tracing/value/ui/scalar_span.html">

<dom-module id='tr-ui-a-single-user-expectation-sub-view'>
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: row;
    }
    #events {
      display: flex;
      flex-direction: column;
    }
    </style>
    <tr-ui-a-single-event-sub-view id="realView"></tr-ui-a-single-event-sub-view>
    <div id="events">
      <tr-ui-a-user-expectation-related-samples-table id="relatedSamples"></tr-ui-a-user-expectation-related-samples-table>
    </div>
  </template>
</dom-module>
<script>
'use strict';

Polymer({
  is: 'tr-ui-a-single-user-expectation-sub-view',
  behaviors: [tr.ui.analysis.AnalysisSubView],

  created() {
    this.currentSelection_ = undefined;
  },

  get selection() {
    return this.currentSelection_;
  },

  set selection(selection) {
    this.$.realView.addEventListener('customize-rows',
        this.onCustomizeRows_.bind(this));

    this.currentSelection_ = selection;
    this.$.realView.setSelectionWithoutErrorChecks(selection);

    this.$.relatedSamples.selection = selection;
    if (this.$.relatedSamples.hasRelatedSamples()) {
      this.$.events.style.display = '';
    } else {
      this.$.events.style.display = 'none';
    }
  },

  get relatedEventsToHighlight() {
    if (!this.currentSelection_) return undefined;
    return tr.b.getOnlyElement(this.currentSelection_).associatedEvents;
  },

  onCustomizeRows_(event) {
    const ue = tr.b.getOnlyElement(this.selection);

    if (ue.rawCpuMs) {
      event.rows.push({
        name: 'Total CPU',
        value: tr.v.ui.createScalarSpan(ue.totalCpuMs, {
          unit: tr.b.Unit.byName.timeDurationInMs
        })
      });
    }
  }
});

tr.ui.analysis.AnalysisSubView.register(
    'tr-ui-a-single-user-expectation-sub-view',
    tr.model.um.UserExpectation,
    {
      multi: false,
      title: 'User Expectation',
    });
</script>
